<template>
  <div class='warpper'>
    <van-radio-group v-model='radio'>
      <van-cell center v-for='(item,index) in list' :key='index'>
        <template #icon>
          <van-radio :name='item.id' disabled checked-color='#ee0a24'></van-radio>
        </template>
        <template #title>
          <span>{{ item.name }}</span>
          <span class='custom-title'>{{ item.tel }}</span>
          <van-tag type='danger' v-if='radio==item.id'>默认</van-tag>
        </template>
        <template #label>
          <span class=''>{{ item.address }}</span>
        </template>
        <template #right-icon>
          <van-icon name='edit' size='20' @click='onEdit(item.id)' />
        </template>
      </van-cell>
    </van-radio-group>
    <div class='btn'>
      <van-button type='danger' round @click=' onAdd()'>新增联系人</van-button>
      <hr>
    </div>
    <van-divider v-if='list.length>9' @click='move()'>点击加载更多</van-divider>
  </div>
</template>

<script>
import {
  getAddress
} from '@/api/address.js'

export default {
  data() {
    return {
      radio: 0,
      chosenAddressId: '1',
      list: [],
      limit: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    move() {
      this.limit += 10
      this.getList(this.limit)
    },
    //获取地址列表
    getList(limit) {
      getAddress({
        limit: limit
      }).then(res => {
        this.list = []
        res.data.forEach(rs => {
          let list = {}
          list.id = rs.id
          list.tel = rs.phone
          list.address = rs.province + rs.city + rs.district + rs.detail
          list.name = rs.realName
          if (rs.isDefault == 1) {
            this.radio = rs.id
          }
          this.list.push(list)
        })
      })
    },
    onAdd() {
      this.$router.push('/newContact')
    },
    onEdit(id) {
      this.$router.push({
        name: 'NewContact',
        params: {
          id: id
        }
      })
    }
  }
}
</script>

<style scoped>
.warpper {
  margin-top: 7px;
  padding: 5px;

}


.custom-title {
  margin: 5px;
}

.van-cell__title {
  margin-left: 10px;
}

.btn button {
  width: 100%;
}

.btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background-color: #FFFFFF;
}
</style>
